<template>
  <el-config-provider :locale="zhCn">
    <div class="wechat-manage">
      <!-- 筛选条件区域 -->
      <filter-form v-model="filterForm" :form-items="formItems" @search="handleSearch" @reset="resetFilter" @update:modelValue="handleFilterChange" />

      <!-- 用户卡片展示区域 -->
      <div class="cards-section">
        <div v-loading="loading" class="cards-container">
          <div v-for="user in tableData" :key="user.id" class="user-card">
            <div class="card-header">
              <div class="user-avatar">
                <el-avatar :size="60" :src="user.userAvatarUrl" :alt="user.userName">
                  <el-icon><User /></el-icon>
                </el-avatar>
              </div>
            </div>

            <div class="card-body">
              <div class="user-name">{{ user.userName || '未设置昵称' }}</div>
              <div class="user-id">微信ID: {{ user.userOpenId || '未设置' }}</div>

              <div class="info-list">
                <div class="info-item" v-if="user.userWechatUserId">
                  <el-icon><Briefcase /></el-icon>
                  <span class="label">企业微信ID:</span>
                  <span class="value">{{ user.userWechatUserId }}</span>
                </div>

                <div class="info-item" v-if="user.userEmail">
                  <el-icon><Message /></el-icon>
                  <span class="label">邮箱:</span>
                  <span class="value">{{ user.userEmail }}</span>
                </div>

                <div class="info-item" v-if="user.userPhone">
                  <el-icon><Phone /></el-icon>
                  <span class="label">手机号:</span>
                  <span class="value">{{ user.userPhone }}</span>
                </div>

                <div class="info-item" v-if="user.accountInfoUpdateTime">
                  <el-icon><Refresh /></el-icon>
                  <span class="label">更新时间:</span>
                  <span class="value">{{ user.accountInfoUpdateTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <el-empty v-if="!loading && tableData.length === 0" description="暂无用户数据" />
      </div>

      <!-- 分页 -->
      <pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" @pagination="handlePagination" />
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { getConnectWeChatList } from '@/api/companyMange/wechatMange';
import type { ConnectWeChatListItem } from '@/api/companyMange/wechatMange';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import FilterForm from '@/components/FilterForm/index.vue';
import Pagination from '@/components/Pagination/index.vue';
import type { FormItem } from '@/components/FilterForm/index.vue';
import { User, Briefcase, Message, Phone, Refresh } from '@element-plus/icons-vue';

interface ApiResponse<T = any> {
  code: number;
  msg: string;
  data: T;
}

// 获取 wxId
const wxId = ref(localStorage.getItem('msgprofile') ? JSON.parse(localStorage.getItem('msgprofile')!).wx_id : '');

// 筛选表单
const filterForm = reactive({
  userName: ''
});

// 表单项配置
const formItems = computed<FormItem[]>(() => [
  {
    label: '用户昵称',
    prop: 'userName',
    type: 'input',
    placeholder: '请输入用户昵称'
  }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10); // 改为12，适合卡片布局
const total = ref(0);

// 加载状态
const loading = ref(false);

// 表格数据
const tableData = ref<ConnectWeChatListItem[]>([]);

// 获取列表数据
const fetchData = async () => {
  loading.value = true;
  try {
    const params = {
      userName: filterForm.userName,
      current: currentPage.value,
      size: pageSize.value,
      wxId: wxId.value
    };
    const res = (await getConnectWeChatList(params)) as unknown as ApiResponse<{
      records: ConnectWeChatListItem[];
      total: number;
      size: number;
      current: number;
    }>;
    if (res.code === 200) {
      tableData.value = res.data.records;
      total.value = res.data.total;
    } else {
      ElMessage.error(res.msg || '获取数据失败');
    }
  } catch (error) {
    ElMessage.error('获取数据失败');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = async (formData?: Record<string, any>) => {
  currentPage.value = 1;
  await fetchData();
};

// 重置筛选
const resetFilter = () => {
  filterForm.userName = '';
  currentPage.value = 1;
  pageSize.value = 12;
  handleSearch();
};

// 分页方法
const handlePagination = ({ pageNum, pageSize: size }: { pageNum: number; pageSize: number }) => {
  currentPage.value = pageNum;
  pageSize.value = size;
  fetchData();
};

// 处理筛选条件变化
const handleFilterChange = (val: any) => {
  filterForm.userName = val.userName || '';
};

// 初始化
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.wechat-manage {
  padding: 20px;
  min-height: calc(100vh - 40px);

  .cards-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;

    .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }

    .user-card {
      border: 1px solid #e4e7ed;
      border-radius: 12px;
      padding: 20px;
      background: #fff;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: #409eff;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;

        .user-avatar {
          flex-shrink: 0;
        }
      }

      .card-body {
        .user-name {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 8px;
          line-height: 1.4;
        }

        .user-id {
          font-size: 14px;
          color: #909399;
          margin-bottom: 16px;
          word-break: break-all;
        }

        .info-list {
          .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
            line-height: 1.4;

            &:last-child {
              margin-bottom: 0;
            }

            .el-icon {
              margin-right: 8px;
              color: #909399;
              font-size: 16px;
              flex-shrink: 0;
            }

            .label {
              color: #606266;
              margin-right: 8px;
              min-width: 70px;
              flex-shrink: 0;
            }

            .value {
              color: #303133;
              word-break: break-all;
              flex: 1;
            }
          }
        }
      }

      // 状态标签样式
      :deep(.el-tag) {
        border-radius: 12px;
        font-weight: 500;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .wechat-manage {
    padding: 10px;

    .cards-section {
      padding: 15px;

      .cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .user-card {
        padding: 15px;

        .card-body {
          .user-name {
            font-size: 16px;
          }

          .info-list {
            .info-item {
              font-size: 13px;

              .label {
                min-width: 60px;
              }
            }
          }
        }
      }
    }
  }
}
</style>